import { Table, Button, Card, PageHeader } from 'antd';
import React, { Component } from 'react';
import { history } from 'umi';

class MpList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      addModal: false,
      list: [
        {
          proName: '尤某',
          proLimitTime: '',
          proImgList: [
            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1125791419,1561105245&fm=26&gp=0.jpg',
            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1125791419,1561105245&fm=26&gp=0.jpg',
            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1125791419,1561105245&fm=26&gp=0.jpg',
          ],
        },
      ],
    };
  }
  render() {
    const columns = [
      {
        title: '项目名称',
        dataIndex: 'proName',
        key: 'proName',
        width: '10%',
      },
      {
        title: '项目持续时间',
        dataIndex: 'proLimitTime',
        key: 'proLimitTime',
        width: '10%',
      },
      {
        title: '项目图片',
        dataIndex: 'proImgList',
        key: 'proImgList',
        width: '60%',
        render: value => {
          return value.map(item => {
            return (
              <img
                style={{ width: 30, height: 30, marginRight: 10 }}
                src={item}
              />
            );
          });
        },
      },
      {
        title: '操作',
        dataIndex: 'op',
        key: 'op',
        width: '20%',
        render: value => {
          return (
            <div>
              <Button type="link">编辑</Button>
              <Button
                type="link"
                onClick={() => {
                  history.push('/mockPage');
                }}
              >
                设置
              </Button>
            </div>
          );
        },
      },
    ];
    return (
      <div>
        <PageHeader title="prd管理" />
        <Button
          type="primary"
          style={{ marginBottom: 24 }}
          onClick={() => {
            this.setState({
              addModal: true,
            });
          }}
        >
          新建项目
        </Button>
        <Card>
          <Table columns={columns} dataSource={this.state.list} />
        </Card>
      </div>
    );
  }
}
export default MpList;
